<template>
  <div v-if="isContMenu" class="menu-item" :style="getStyle" @click="addClick">
    <i class="el-icon-circle-plus-outline"></i>
    <div class="test">新建文章</div>
  </div>
</template>


<script>
  import ala from 'ala'
export default {
    data () {
      return {
        isContMenu: false,
        getStyle: ''
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init (ev) {
        window.addEventListener('click', res => {
          this.isContMenu = false
        }, true)
        window.addEventListener('contextmenu', res => {
          if (this.isContMenu) {
            this.isContMenu = false
          }
        }, true)
      },
      contextmenu (ev) {
        this.getStyle = `top:${ev.y}px;left:${ev.x}px;`
        this.isContMenu = true
      },
      addClick () {
        this.$emit('addWiki')
      }
    }
  }
</script>


<style lang="scss" scoped>
  .menu-item {
    position: absolute;
    top: 100px;
    left: 100px;
    background: #ffffff;
    box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
    width: 120px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999;
    i {
      font-size: 20px;
    }
    .test {
      margin-left: 5px;
    }
    &:hover {
      background: #e9f3ff;
    }
  }
</style>


